


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>  Hexo使用经验总结 |    经验分享</title>
  <!-- 标签页图标 -->
  

  <!-- 图标库 -->
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">
  <!-- 动画库 -->
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fushaolei/cdn-white@1.0/css/animate.css"/>
  
  <!-- css文件 -->
  
<link rel="stylesheet" href="/blog/css/white.css">

  
<link rel="stylesheet" href="/blog/css/highlight.css">

  <!-- 代码高亮 -->
  
<meta name="generator" content="Hexo 5.0.0"></head>


<body>

<div class="menu-outer">
    <div class="menu-inner">
      <div class="menu-site-name  animate__animated  animate__fadeInUp">
        <a href="/blog/">
          经验分享
        </a>
        
      </div>
      <div class="menu-group">
        <ul class="menu-ul">
        
          <a href="/blog/" class="nav-link">
            <li class="menu-li  animate__animated  animate__fadeInUp">
              首页
            </li>
          </a>
        
          <a href="/blog/archives" class="nav-link">
            <li class="menu-li  animate__animated  animate__fadeInUp">
              文章列表
            </li>
          </a>
        
        
        
        <a href="/blog/search">
          <li class="menu-li  animate__animated  animate__fadeInUp">
            <i class="ri-search-line"></i>
          </li>
        </a>
        
          <li class="menu-li animate__animated  animate__fadeInUp" id="mobile-menu">
            <i class="ri-menu-line"></i>
          </li>
        
        </ul>

      </div>

    </div>
</div>
<div id="mobile-main" class="animate__animated  animate__fadeIn">
  <div class="mobile-menu-inner">
    <div class="mobile-menu-site-name animate__animated  animate__fadeInUp">
      <a href="/blog/">
        经验分享
      </a>
    </div>
    <div class="mobile-menu-group" id="mobile-close">
      <i class="ri-close-line"></i>
    </div>

  </div>

  <div class="mobile-menu-div">
  
    <a href="/blog/" class="mobile-nav-link">
      <div class="mobile-menu-child animate__animated  animate__fadeInUp">
        <span>首页</span>
      </div>
    </a>
  
    <a href="/blog/archives" class="mobile-nav-link">
      <div class="mobile-menu-child animate__animated  animate__fadeInUp">
        <span>文章列表</span>
      </div>
    </a>
  
  
    <a href="/blog/search">  
      <div class="mobile-menu-child  animate__animated  animate__fadeInUp">
        <i class="ri-search-line"></i>
      </div>
    </a>
    
  </div>


</div>

<div class="body-outer">
  <div class="body-inner">
    
<article class="post-inner">
  <div class="post-content-outer">
    <div class="post-intro">
      <div class="post-title animate__animated  animate__fadeInUp">hexo使用经验总结</div>
      <div class="meta-intro animate__animated  animate__fadeInUp">Aug 10 2020</div>
      
    </div>
    <div class="post-content-inner">
      <div class="post-content-inner-space">

      </div>
      <div class="post-content-main animate__animated  animate__fadeInUp">
        <!-- top型目录 -->
        
        <h2 id="hexo-使用文档-快速使用"><a href="#hexo-使用文档-快速使用" class="headerlink" title="hexo 使用文档-快速使用"></a>hexo 使用文档-快速使用</h2><p>目的：</p>
<ol>
<li>掌握 hexo 安装使用。</li>
<li>多人协同维护文章。</li>
</ol>
<h3 id="1-项目安装和初始化"><a href="#1-项目安装和初始化" class="headerlink" title="1. 项目安装和初始化"></a>1. 项目安装和初始化</h3><h4 id="1-安装-hexo"><a href="#1-安装-hexo" class="headerlink" title="1. 安装 hexo"></a>1. 安装 hexo</h4><p>依赖环境</p>
<p>Node.js    （  <em>Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本</em>  ）</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<h4 id="2-初始化项目"><a href="#2-初始化项目" class="headerlink" title="2. 初始化项目"></a>2. 初始化项目</h4><p>Hexo 将会在指定文件夹中新建所需要的文件。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo init &lt;folder&gt;</span><br><span class="line">cd &lt;folder&gt;</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>

<p>或者自己创建一个文件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo init </span><br></pre></td></tr></table></figure>

<p>新建一个网站。如果没有设置 <code>folder</code> ，Hexo 默认在目前的文件夹建立初始化文件</p>
<h3 id="2-写博客快速上手篇"><a href="#2-写博客快速上手篇" class="headerlink" title="2. 写博客快速上手篇"></a>2. 写博客快速上手篇</h3><h4 id="1-创建一个新文章"><a href="#1-创建一个新文章" class="headerlink" title="1.创建一个新文章"></a>1.创建一个新文章</h4><p>项目创建完成后我们可以在项目内部去尝试一些指令</p>
<p><strong>new</strong></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new name</span><br></pre></td></tr></table></figure>
<p>注意最好是英文名称</p>
<p>
        <span class="lazyload-img-span">
        <img   
           data-src="./Snipaste_2020-08-06_11-57-17.png" >
        </sapn>
      </p>
<p>练习.md</p>
<p>
        <span class="lazyload-img-span">
        <img   
           data-src="./Snipaste_2020-08-06_11-58-05.png" >
        </sapn>
      </p>
<p>也可以直接把已经写好的md文件直接放过去但是要<strong>注意顶部格式</strong>以及自己创建一个文件夹<strong>同文件名一样</strong></p>
<p>例如：</p>
<p>文件结构</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">-test.md</span><br><span class="line">-test</span><br></pre></td></tr></table></figure>

<p>md文件头结构</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: hexo使用经验总结  <span class="comment">//标题</span></span><br><span class="line">date: <span class="number">2020</span><span class="number">-08</span><span class="number">-10</span> <span class="number">20</span>:<span class="number">07</span>:<span class="number">54</span> <span class="comment">// 创建时间</span></span><br><span class="line">tags: hexo <span class="comment">//标签</span></span><br><span class="line">categories: 学习 <span class="comment">// 分类</span></span><br><span class="line"></span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>头部信息是全局搜索文章的关键。以上均可通过 <code>hexo new name</code> 来生成。</p>
<h4 id="2-写一篇文章-md-文件"><a href="#2-写一篇文章-md-文件" class="headerlink" title="2. 写一篇文章 md 文件"></a>2. 写一篇文章 md 文件</h4><p>我们以孟老师的分享文档为例子</p>
<p><strong>创建文件</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new 文件名</span><br></pre></td></tr></table></figure>

<ol>
<li><p>直接复制内容到创建的文件内</p>
<p>注意 <strong>头部要保留 hexo 创建的格式</strong></p>
</li>
</ol>
<p>
        <span class="lazyload-img-span">
        <img   
           data-src="./Snipaste_2020-08-06_12-04-19.png" >
        </sapn>
      </p>
<p><strong>本地预览</strong></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run s</span><br></pre></td></tr></table></figure>

<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">$</span><span class="bash"> npm run s</span></span><br><span class="line"></span><br><span class="line"><span class="meta">&gt;</span><span class="bash"> hexo-site@0.0.0 server D:\czbo\experienceShare</span></span><br><span class="line"><span class="meta">&gt;</span><span class="bash"> hexo server</span></span><br><span class="line"></span><br><span class="line">INFO  Validating config</span><br><span class="line">INFO  Start processing</span><br><span class="line">INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.</span><br></pre></td></tr></table></figure>

<p>
        <span class="lazyload-img-span">
        <img   
           data-src="./Snipaste_2020-08-06_12-08-30.png" >
        </sapn>
      </p>
<h4 id="3-发布到-master"><a href="#3-发布到-master" class="headerlink" title="3. 发布到 master"></a>3. 发布到 master</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run d</span><br></pre></td></tr></table></figure>

<p>执行完命令就可以打开gitee看我们托管的播客啦</p>
<h2 id="hexo-高级配置-个人进阶"><a href="#hexo-高级配置-个人进阶" class="headerlink" title="hexo 高级配置-个人进阶"></a>hexo 高级配置-个人进阶</h2><h4 id="root路径配置"><a href="#root路径配置" class="headerlink" title="root路径配置"></a>root路径配置</h4><p>_config.yml 中 root 的默认路径是 <code>/</code>如果我们直接上传到gitee中就会出现资源文件路径错误的问题。</p>
<p>这时候需求改下。以本项目为例：</p>
<p>仓库地址为</p>
<p>
        <span class="lazyload-img-span">
        <img   
           data-src="./Snipaste_2020-08-11_12-03-48.png" >
        </sapn>
      </p>
<p>我们本地配置如下</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># URL</span></span><br><span class="line"><span class="comment">## If your site is put in a subdirectory, set url as &#x27;http://yoursite.com/child&#x27; and root as &#x27;/child/&#x27;</span></span><br><span class="line"><span class="attr">url:</span> <span class="string">http://linrufeng.gitee.io/experienceaccumulation/</span> <span class="comment"># 完整的路径可以不配置</span></span><br><span class="line"><span class="attr">root:</span> <span class="string">/experienceaccumulation/</span> <span class="comment"># 仓库名称</span></span><br><span class="line"><span class="attr">permalink:</span> <span class="string">page/:year/:title/</span> <span class="comment"># build之后文章的创建路径 page/年/文章名</span></span><br><span class="line"><span class="attr">permalink_defaults:</span></span><br><span class="line"><span class="attr">pretty_urls:</span></span><br><span class="line">  <span class="attr">trailing_index:</span> <span class="literal">true</span> <span class="comment"># Set to false to remove trailing &#x27;index.html&#x27; from permalinks</span></span><br><span class="line">  <span class="attr">trailing_html:</span> <span class="literal">true</span> <span class="comment"># Set to false to remove trailing &#x27;.html&#x27; from permalinks</span></span><br></pre></td></tr></table></figure>



<h4 id="插件配置"><a href="#插件配置" class="headerlink" title="插件配置"></a>插件配置</h4><p><strong>我们以图片路径插件为例子</strong></p>
<p>正常情况下 hexo 的图片引入和我们使用md查看工具的路径是有区别的。通过安装插件 </p>
<p>hexo-image-link</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-image-link --save</span><br></pre></td></tr></table></figure>

<p>接下来修改 config.yml</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">post_asset_folder:</span> <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>图片能够在使用typora编辑和hexo预览发布时都能正常显示。</p>
<h4 id="主题定制"><a href="#主题定制" class="headerlink" title="主题定制"></a>主题定制</h4><p>以使用 white 为例</p>
<p><a target="_blank" rel="noopener" href="https://github.com/FuShaoLei/hexo-theme-white">https://github.com/FuShaoLei/hexo-theme-white</a></p>
<p>在shell中输入命令：<code>git clone https://github.com/FuShaoLei/hexo-theme-white.git themes/white</code></p>
<p>克隆完成后，在<code>/Hexo/themes</code>目录下，可以看到 <code>landscape</code>和<code>white</code> 两个文件夹。<br> 我们所要使用的主题都是放在这个目录下，Hexo默认使用的是<code>landscape</code>主题，</p>
<p>_config.yml</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># Extensions</span></span><br><span class="line"><span class="comment">## Plugins: https://hexo.io/plugins/</span></span><br><span class="line"><span class="comment">## Themes: https://hexo.io/themes/</span></span><br><span class="line"><span class="attr">theme:</span> <span class="string">white</span></span><br></pre></td></tr></table></figure>

<p>想获取更多主题，可在网站：<a target="_blank" rel="noopener" href="https://links.jianshu.com/go?to=https://hexo.io/themes/">https://hexo.io/themes/</a> 选择自己喜欢的主题，按照此步的步骤clone下来。</p>

        <!-- 分类文章 -->
        
      </div>
      <div class="post-content-inner-space">
        
          <div class="space-toc-main animate__animated  animate__fadeInUp">
            <ol class="space-toc"><li class="space-toc-item space-toc-level-2"><a class="space-toc-link" href="#hexo-%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3-%E5%BF%AB%E9%80%9F%E4%BD%BF%E7%94%A8"><span class="space-toc-text">hexo 使用文档-快速使用</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#1-%E9%A1%B9%E7%9B%AE%E5%AE%89%E8%A3%85%E5%92%8C%E5%88%9D%E5%A7%8B%E5%8C%96"><span class="space-toc-text">1. 项目安装和初始化</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#1-%E5%AE%89%E8%A3%85-hexo"><span class="space-toc-text">1. 安装 hexo</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#2-%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE"><span class="space-toc-text">2. 初始化项目</span></a></li></ol></li><li class="space-toc-item space-toc-level-3"><a class="space-toc-link" href="#2-%E5%86%99%E5%8D%9A%E5%AE%A2%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B%E7%AF%87"><span class="space-toc-text">2. 写博客快速上手篇</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#1-%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%96%B0%E6%96%87%E7%AB%A0"><span class="space-toc-text">1.创建一个新文章</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#2-%E5%86%99%E4%B8%80%E7%AF%87%E6%96%87%E7%AB%A0-md-%E6%96%87%E4%BB%B6"><span class="space-toc-text">2. 写一篇文章 md 文件</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#3-%E5%8F%91%E5%B8%83%E5%88%B0-master"><span class="space-toc-text">3. 发布到 master</span></a></li></ol></li></ol></li><li class="space-toc-item space-toc-level-2"><a class="space-toc-link" href="#hexo-%E9%AB%98%E7%BA%A7%E9%85%8D%E7%BD%AE-%E4%B8%AA%E4%BA%BA%E8%BF%9B%E9%98%B6"><span class="space-toc-text">hexo 高级配置-个人进阶</span></a><ol class="space-toc-child"><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#root%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE"><span class="space-toc-text">root路径配置</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E6%8F%92%E4%BB%B6%E9%85%8D%E7%BD%AE"><span class="space-toc-text">插件配置</span></a></li><li class="space-toc-item space-toc-level-4"><a class="space-toc-link" href="#%E4%B8%BB%E9%A2%98%E5%AE%9A%E5%88%B6"><span class="space-toc-text">主题定制</span></a></li></ol></li></ol></li></ol>
           </div>
        
      </div>
   </div>
    <!-- 评论 -->
    
    <div class="bottom-comments-outer">
      <div class="bottom-comments-inner">
        <!-- valine -->
        
        <!-- Gitalk -->
        
        <!-- livere -->
        
        </div>
      </div>
    
  </div>
</article>
  </div>
</div>



<!-- 如果是home模式的话，不在首页就显示footer，如果不是home模式的话 所有都显示footer -->

  <div class="footer-outer animate__animated  animate__fadeInUp">
    <div class="footer-inner">
    <div class="footer-text">
    <p>黑马培训前端</p>

    </div>
    <div class="footer-contact">
    <ul class="footer-ul">
        
        <li class="footer-li">
            <a href="https://github.com/FuShaoLei/hexo-theme-white" target="_blank">
                <i class="ri-github-line"></i>
            </a>
        </li>
        
        <li class="footer-li">
            <a href="mailto:1563250958@qq.com" target="_blank">
                <i class="ri-mail-line"></i>
            </a>
        </li>
        
    </ul>
    </div>
    </div>
</div>






<script src="/blog/js/white.js"></script>


<script src="/blog/js/highlight.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

</body>
</html>
